<template>
  <div class="main-page">
    <el-form ref="form">
      <!-- 搜索栏 -->
      <BaseSearchBar v-on:ChildSearchEvent="getSearchMatchList"></BaseSearchBar>
    </el-form>
    <!-- 表单 -->
    <el-card :body-style="{ padding: '0px' }" class="box-card">
      <!-- <div class="SearchT">
        <div class="tableLable">数据管理列表</div>
        <el-button
          type="danger"
          class="BatchDeleBtn"
          style="width:80px"
          size="small"
        >批量删除</el-button>

        <el-button
          type="primary"
          class="exportBtn"
          style="width:80px"
          size="small"
        >导出</el-button>
      </div>-->
      <div class="tableStyle">
        <el-table
          ref="multipleTable"
          class="card-table"
          :data="drugRouteList"
          tooltip-effect="dark"
          style="font-size: 12px"
          :header-cell-style="{ background: '#3F9DFD', color: '#FFF' }"
          size="medium"
          height="634px"
          stripe
          border
        >
          <!-- <el-table-column label="全选"
                           type="selection"
          width="40" />-->
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column label="操作" show-overflow-tooltip width="70">
            <template slot-scope="scope">
              <el-button type="text" @click="dialogMatch(scope.row.id)">配对</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="hs_NAME" label="医院名称" show-overflow-tooltip width="120"></el-table-column>>
          <el-table-column prop="id" label="医院给药途径编码" show-overflow-tooltip width="120" />
          <el-table-column prop="gyfsmc" label="医院给药途径名称" show-overflow-tooltip width="180" />
          <el-table-column prop="mdhsRouteName" label="配对给药途径名称" show-overflow-tooltip width="180" />
          <el-table-column label="类型(可编辑)" show-overflow-tooltip width="130">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.sylx"
                @change="changesylx(scope.row.id, $event)"
                size="small"
              >
                <el-option
                  v-for="item in sylxData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <!-- {{(scope.row.sylx==1)?'口服':(scope.row.sylx=2)?'注射(全身)':(scope.row.sylx=3)?'注射(局部)':(scope.row.sylx==4)?'外用':(scope.row.sylx==5)?'其他(全身)':'其他(局部)'}} -->
            </template>
          </el-table-column>
          <el-table-column label="缩写(可编辑)" show-overflow-tooltip width="150">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.sx"
                @change="changesx(scope.row.id, $event)"
                size="small"
              >
                <el-option
                  v-for="item in sxData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <!-- {{(scope.row.sx==1)?'po':(scope.row.sx==2)?'im':(scope.row.sx==3)?'iv':(scope.row.sx==4)?'ivgtt':(scope.row.sx==5)?'iv drip':(scope.row.sx==6)?'眼用':(scope.row.sx==7)?'外用':(scope.row.sx==8)?'其他':'系统默认'}} -->
            </template>
          </el-table-column>
          <el-table-column prop="sfps" label="是否皮试(可编辑)" show-overflow-tooltip width="120">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.sfps"
                @change="changesfps(scope.row.id, $event)"
                size="small"
              >
                <el-option
                  v-for="item in sfpsData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <!-- {{(scope.row.sfps==1)?'是':'否'}} -->
            </template>
          </el-table-column>
          <el-table-column prop="matchState" label="配对状态" show-overflow-tooltip width="80">
            <template
              slot-scope="scope"
            >{{(scope.row.matchState==0)?'未配对':(scope.row.matchState==1)?'已配对':'无法配对'}}</template>
          </el-table-column>
          <el-table-column label="配对人员/时间" show-overflow-tooltip>
            <template slot-scope="scope">{{scope.row.matchUser}}/{{getDate(scope.row.matchTime)}}</template>
          </el-table-column>
        </el-table>
        <div class="block">
          <!-- @size-change数值改变时候触发 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[20, 50, 100]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total"
            background
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <el-dialog
      title="给药途径配对"
      :visible.sync="dialogMatchVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-card class="dialog-card">
        <div slot="header" class="Card_title">
          <span>本院给药途径信息</span>
        </div>
        <div slot="header" class="Card_title" style="border-left:1.5px solid rgb(192, 192, 192);">
          <span>配对给药途径信息</span>
        </div>
        <div class="Card_body">
          <el-form
            :inline="true"
            :model="dialogData"
            style="text-align:center"
            class="demo-form-inline"
          >
            <el-form-item label="给药途径名称">
              <el-input v-model="dialogData.gyfsmc" size="mini"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="Card_body" style="border-left:1.5px solid rgb(192, 192, 192);">
          <el-form
            :inline="true"
            :model="dialogData"
            style="text-align:center"
            class="demo-form-inline"
          >
            <el-form-item label="给药途径名称">
              <el-input v-model="dialogData.mdhsRouteName" size="mini"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>

      <el-card class="dialog-card2" style="margin-top: 12px;">
        <div class="Card_body2" style="height:40px">
          <el-form
            :inline="true"
            :model="dialogData"
            style="margin-left:15px"
            class="demo-form-inline"
          >
            <el-form-item label="药品信息">
              <el-input v-model="dialogData.srm" size="mini" placeholder="请输入关键字"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="getDialogRouteSearchList()">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          :data="dialogData.routerListData"
          height="350"
          border
          size="mini"
          style="width: 100%"
        >
          <el-table-column label width="35">
            <template slot-scope="scope">
              <el-radio :label="scope.row.id" v-model="dialogData.mdhsRouteId">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="routeId" label="给药途径编码" width="180"></el-table-column>
          <el-table-column prop="routeName" label="给药途径名称"></el-table-column>
        </el-table>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" size="mini" @click="open">给药途径无法配对</el-button>
        <el-button type="success" size="mini" @click="SaveEditMatch">保存配对</el-button>
        <el-button size="mini" @click="dialogMatchVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BaseSearchBar from "./BaseSearchBar";
import BaseSearchBarItem from "../../../components/BaseSearchBarItem";
import {
  getDrugRouteList,
  getdate,
  changesylx,
  changesx,
  changesfps,
  getRouteMatchList,
  SaveEditMatch,
  SaveNoEditMatch
} from "@/api/rad";

export default {
  name: "MainPage",
  components: {
    BaseSearchBar,
    BaseSearchBarItem
  },

  data() {
    return {
      // 列表的参数对象
      queryInfo: {
        // 检索码
        srm: "",
        // 不配对标记 - 1表示无法配对 0 表示未配对  1已配对；
        match_state: "",
        page: 1,
        pageSize: 20
      },
      drugRouteList: [],
      total: 0,
      dialogMatchVisible: false,
      // table数据
      sylxData: [
        {
          value: 1,
          label: "口服"
        },
        {
          value: 2,
          label: "注射(全身)"
        },
        {
          value: 3,
          label: "注射(局部)"
        },
        {
          value: 4,
          label: "外用"
        },
        {
          value: 5,
          label: "其他(全身)"
        },
        {
          value: 6,
          label: "其他(局部)"
        },
        {
          value: -1,
          label: "系统默认"
        }
      ],
      // 1 po 2 im 3 iv 4 ivgtt 5 iv drip 6 眼用 7 外用 8 其他
      sxData: [
        {
          value: 1,
          label: "po"
        },
        {
          value: 2,
          label: "im"
        },
        {
          value: 3,
          label: "iv"
        },
        {
          value: 4,
          label: "ivgtt"
        },
        {
          value: 5,
          label: "iv drip"
        },
        {
          value: 6,
          label: "眼用"
        },
        {
          value: 7,
          label: "外用"
        },
        {
          value: 8,
          label: "其他"
        },
        {
          value: 0,
          label: "系统默认"
        }
      ],
      sfpsData: [
        {
          value: 1,
          label: "是"
        },
        {
          value: 0,
          label: "否"
        }
      ],
      // dialog
      SearchKey: "",
      dialogData: {
        id: "",
        // 本院给药途径
        gyfsmc: "",
        // 配对给药途径
        mdhsRouteName: "",
        // 搜索关键字
        srm: "",
        //dialog搜索数组
        routerListData: [],
        // 配对给药途径ID
        mdhsRouteId: ""
      }
    };
  },
  created: function() {
    this.getDrugRouteList();
  },
  methods: {
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getDrugRouteList();
    },
    // 当前展示的页面
    handleCurrentChange(newPage) {
      // console.log(newPage)
      // console.log("handleCurrentChange")
      this.queryInfo.page = newPage;
      this.getDrugRouteList();
    },
    handleClose(done) {
      done();
    },

    // api
    async getDrugRouteList() {
      let _this = this;
      // console.log(this)
      // console.log(_this)
      let res = await this.$rad.getDrugRouteList({
        // srm: _this.queryInfo.srm,
        srm: this.queryInfo.srm,
        match_state: this.queryInfo.match_state,
        sort: this.queryInfo.sort,
        rm: this.queryInfo.rm,
        page: _this.queryInfo.page,
        pageSize: _this.queryInfo.pageSize
      });
      console.log(res), (this.drugRouteList = res.rows);
      this.total = res.total;
      // console.log(this.total)
    },
    //获取搜索列表
    async getSearchMatchList(data) {
      this.queryInfo.srm = data.srm;
      this.queryInfo.match_state = data.match_state;

      console.log(this.queryInfo);
      this.getDrugRouteList();
    },
    // 时间抽转换时间
    getDate(date) {
      return this.$rad.getdate(date);
    },
    async changesylx(TypeId, e) {
      console.log(TypeId);
      console.log(e);
      var res = await this.$rad.changesylx({
        id: TypeId,
        sylx: e
      });
      console.log(res.code);
      if (res.code == 1) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
        this.getDrugRouteList();
      }
    },
    async changesx(TypeId, e) {
      var res = await this.$rad.changesx({
        id: TypeId,
        sx: e
      });
      console.log(res.code);
      if (res.code == 1) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
        this.getDrugRouteList();
      }
    },
    async changesfps(TypeId, e) {
      var res = await this.$rad.changesfps({
        id: TypeId,
        sfps: e
      });
      console.log(res.code);
      if (res.code == 1) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
        this.getDrugRouteList();
      }
    },
    dialogMatch(id) {
      this.dialogData.id = id;
      // this.dialogData.srm
      this.getDialogName();
      this.getDialogRouteSearchList();
      this.dialogMatchVisible = true;
    },
    async getDialogRouteList() {},
    async getDialogName() {
      let res = await this.$rad.getRouteMatchList({
        id: this.dialogData.id
      });
      console.log(this.dialogData.id);
      this.dialogData.gyfsmc = res.gyfsmc;

      this.dialogData.mdhsRouteName = res.gyfsmc;
    },
    async getDialogRouteSearchList() {
      console.log(this.dialogData.srm);
      let res = await this.$rad.getDialogRouteSearchList({
        id: this.dialogData.id,
        srm: this.dialogData.srm
      });
      console.log(res);
      this.dialogData.routerListData = res;
    },
    // 保存给药途径配对
    async SaveEditMatch() {
      console.log(this.dialogData.id);
      console.log(this.dialogData.mdhsRouteId);
      let res = await this.$rad.SaveEditMatch({
        id: this.dialogData.id,
        mdhsRouteId: this.dialogData.mdhsRouteId
      });
      console.log(res);
      if (res.code == 1) {
        this.dialogMatchVisible = false;
        this.getDrugRouteList();
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else if (res.result == 1) {
        return this.$message({
          type: "error",
          message: res.msg
        });
      }
    },
    // 给药途径无法配对
    open() {
      this.$confirm("确定给药途径无法配对?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.SaveNoEditMatch();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    async SaveNoEditMatch() {
      let res = await this.$rad.SaveNoEditMatch({
        id: this.dialogData.id
      });
      console.log(res);
      if (res.code == 1) {
        this.dialogMatchVisible = false;
        this.getDrugRouteList();
        return this.$message({
          type: "success",
          message: "操作成功!"
        });
      } else {
        return this.$message({
          type: "error",
          message: "操作失败!"
        });
      }
    }
  }
};
</script>
<style scoped>
.el-card {
  margin-left: 3px;
}
.SearchT {
  display: flex;
  justify-content: flex-end;
  height: 50px;
  align-items: center;
  background-color: #e6edf3;
  font-size: 12px;
}
.tableLable {
  flex: 1;
  text-align: left;
  margin-left: 15px;
  letter-spacing: 2px;
  font-size: 12px;
  color: #32a6f3;
  font-weight: bold;
}
.exportBtn {
  margin-right: 23px;
}
.BatchDeleBtn {
  margin-right: 15px;
}
.tableStyle {
  width: 100%;
  height: 100%;
}
.card-table {
  width: 100%;
  height: 75%;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
.dialog-card >>> .el-card__body {
  padding: 0px 0px;
  width: 100%;
  height: 40px;
  display: flex;
  flex: 1;
  /* background-color: red; */
}
.dialog-card >>> .el-card__header {
  padding: 0px 0px;
  display: flex;
  flex: 1;
}
.dialog-card >>> .Card_title {
  width: 50%;
  height: 25px;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-card >>> .Card_body {
  width: 50%;
  /* margin-left: 15px; */
  margin-right: 15px;
}
.dialog-card2 >>> .el-card__body {
  padding: 0px 0px;
  width: 100%;
  height: 284px;

  /* background-color: red; */
}
.dialog-card2 >>> .dialogSearch {
  height: 50px;
  display: flex;
  align-items: center;
}
.el-table >>> .el-button {
  font-size: 12px;
}
.block >>> .el-input__inner .el-pagination {
  font-size: 12px;
}
</style>
